<template>
    <div class="source">
        <div class="header">
            <span>从源文件选择</span>
            <!-- <img src="@/assets/img/close.png" @click="hidden()"> -->
        </div>
        <div class="search">
            <el-select v-model="pageQuery.type" placeholder="请选择" @change="sourceChange(pageQuery.type)">
                <el-option
                v-for="item in sourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="pageQuery.fileName" placeholder="请输入搜索的源文件名称"/>
            <el-button type="primary" @click="sourceSearch">搜索</el-button>
            <el-button @click="sourceReset">重置</el-button>
        </div>
        <div class="table-div"><!-- @selection-change="handleSelectionChange" -->
            <el-table ref="multipleTable" border :data="pageVO.list" style="width: 100%" @select="selectRow">
                <el-table-column prop="fileName" label="源文件名称" width="100"></el-table-column>
                <el-table-column prop="img" width="230" label="缩略图">
                    <template slot-scope="scope">
                        <img class="img" :src="imgUrl + scope.row.thumbnailPath">
                    </template>
                </el-table-column>
                <el-table-column prop="type" width="100" label="属性">
                    <template scope="scope">
                        <p v-if="scope.row.type=='1'">图片</p>
                        <p v-if="scope.row.type=='2'">音频</p>
                        <p v-if="scope.row.type=='3'">视频</p>
                        <p v-if="scope.row.type=='4'">3D</p>
                        <p v-if="scope.row.type=='5'">文件</p>
                    </template>
                </el-table-column>
                <el-table-column prop="fileSize" width="100" label="大小"></el-table-column>
                <el-table-column prop="filePath" width="400" label="url"></el-table-column>
                <el-table-column prop="describe" width="130" label="描述"></el-table-column>
                <el-table-column
                  type="selection"
                  width="55"
                >
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <!-- <pagination v-show="pageVO.total > 0" :total="pageVO.total" :page.sync="pageQuery.pageNum" :limit.sync="pageQuery.pageSize" @pagination="getPage()" /> -->

        <div class="source-btn">
            <el-button @click="hidden()">取消</el-button>
            <el-button type="primary" v-if="confirm" @click="sendMsg()">确定</el-button>
            <el-button type="primary" v-if="confirms" @click="sendMsgs(),hidden()">确定</el-button>
        </div>
    </div>
</template>

<script>
// import * as api from '@/api/product/attr'
// import Pagination from '@/components/Pagination'
export default {
    name: "source",
    // components:{ Pagination },
    data(){
        return{
            input: '',
            styles:true,
            num:0,
            fileName:"",
            confirm: true,
            confirms: false,
            sourceOptions: [{
                value: '0',
                label: '全部'
            }, {
                value: '1',
                label: '图片'
            }, {
                value: '2',
                label: '3D'
            }, {
                value: '3',
                label: '音频'
            }, {
                value: '4',
                label: '视频'
            }],
            multipleSelection: [],

            tableData: [],
            type:"",
            filePath:"",
            imgUrl: process.env.VUE_APP_RESOURCES_URL,

            // 查询的参数
            pageQuery: {
                pageSize: 10,
                pageNum: 1,
                type:"",
                fileName: '',
            },
            // 返回参数
            pageVO: {
                list: [], // 返回的列表
                total: 0, // 一共多少条数据
                pages: 0 // 一共多少页
            },
            pageLoading: true
        }
    },
    mounted(){
        this.getPage()
    },
    methods:{
        //渲染列表数据
        getPage() {
            this.$http({
                url: this.$http.adornUrl(`/m/source_file/page?pageSize=${this.pageQuery.pageSize}&pageNum=${this.pageQuery.pageNum}`),
                method: 'get',
            }).then(res => {
                console.log(555,res)
                // this.dataList = data.records
                // this.page.total = data.total
                // this.dataListLoading = false
            })


            // api.sourceFile(this.pageQuery).then(pageVO => {
            //     this.pageVO = pageVO
            // })
        },

        //点击关闭源文件选择弹窗
        hidden() {
            this.$emit('hidden')
        },

        //类型选择
        sourceChange(value){
            console.log(value)
        },

        //搜索
        sourceSearch(){
            if(this.pageQuery.type==""){
                this.$message({
                    type: 'info',
                    message: '选择搜索类型'
                })
                return false
            }else if(this.pageQuery.fileName==""){
                this.$message({
                    type: 'info',
                    message: '请输入搜索名称'
                })
                return false
            }else{
                this.$http({
                    url: this.$http.adornUrl(`/m/source_file/page?pageSize=${this.pageQuery.pageSize}&pageNum=${this.pageQuery.pageNum}&type=${this.pageQuery.type}&fileName=${this.pageQuery.fileName}`),
                    method: 'get',
                }).then(res => {
                    console.log(555,res)
                    // this.dataList = data.records
                    // this.page.total = data.total
                    // this.dataListLoading = false
                })

                // api.sourceFilesearch(this.pageQuery).then(pageVO => {
                //     this.pageVO = pageVO
                // })
            }
        },

        //重置
        sourceReset(){
            this.pageQuery.type = ""; this.pageQuery.fileName = ""
            this.$http({
                url: this.$http.adornUrl(`/m/source_file/page?pageSize=${this.pageQuery.pageSize}&pageNum=${this.pageQuery.pageNum}`),
                method: 'get',
            }).then(res => {
                console.log(555,res)
                // this.dataList = data.records
                // this.page.total = data.total
                // this.dataListLoading = false
            })
            // api.sourceFile(this.pageQuery).then(pageVO => {
            //     this.pageVO = pageVO
            // })

        },

        //源文件选择
        handleRowClick(row){
            this.type = row.type;
            this.filePath = row.filePath;
            this.confirm = false;
            this.confirms = true;
        },
        selectRow(val, row) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(row, true)
          this.type = row.type;
          this.filePath = row.filePath;
          this.confirm = false;
          this.confirms = true;
        }
        ,
        //确定按钮
        sendMsg(e){
            if(this.type==""){
                this.$message({
                    type: 'info',
                    message: '请选择源文件'
                })
                return false;
            }
        },
        //确定加关闭按钮
        sendMsgs(e){
            this.$emit("sendmsg",this.type,this.filePath)
        },
    }
}
</script>


<style scoped>
.source{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 1200px;
    height: 650px;
    overflow: auto;
    background: #fff;
}

li{ list-style-type: none; }
.header{
    height: 50px;
    box-shadow:0px 3px 5px rgb(242,242,242);
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.header span{
    position: relative;
    padding-left: 10px;
}
.header img{
    width: 25px;
    height: 25px;
}
.search{
    display: flex;
    align-items: center;
    margin: 30px 0;
    padding: 0 20px;
}
.table-div{
    padding: 0 20px;
}
.search >>> .el-input{
    width: 200px;
    margin-right: 10px;
}
.source >>> .el-table__cell .cell{
    text-align: center;
}
.source >>> .cell .img{
    width: 130px;
    height: 80px;
    border-radius: 5px;
}
.source-btn{
    display: flex;
    justify-content: center;
}
.source-btn >>> .el-button--medium{
    margin: 0 20px;
}
.pagination-container{
    padding: 0 16px 30px;
}
</style>
